<template>
  <view class="summary-card" :class="{ 'big-card': isbigCard }">
    <view class="card-header">
      <view class="card-title">
        <ve-icon class="title-icon" v-if="icon" :name="icon" size="32"></ve-icon>
        <span v-if="!title"></span>
        <ve-tooltip v-else-if="title.length > 7" placement="top">
          <template #content>
            <view style="max-width: 220rpx; white-space: break-spaces">{{ title }}</view>
          </template>
          <span class="title-text">{{ title }}</span>
        </ve-tooltip>
        <span v-else class="title-text">{{ title }}</span>
        <ve-icon v-if="clickable" name="rs_right" size="32"></ve-icon>
        <span class="help-icon-width"></span>
        <ve-tooltip v-if="$slots.tooltip" placement="top">
          <template #content><slot name="tooltip"></slot></template>
          <ve-icon name="rs_help" size="28"></ve-icon>
        </ve-tooltip>
      </view>
      <view class="card-rate">
        <CardRate v-if="rate && isbigCard" :tb="rate.tb" :hb="rate.hb" />
      </view>
    </view>
    <slot></slot>
    <!-- 同比环比 -->
    <CardRate v-if="rate && !isbigCard" :tb="rate.tb" :hb="rate.hb" />
    <slot name="footer"></slot>
  </view>
</template>

<script setup lang="ts">
  import { computed } from 'vue'
  import CardRate from './card-rate.vue'

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    // 同比环比
    rate: {
      type: Object,
    },
    bigSize: Boolean,
    linkable: Boolean,
    clickable: Boolean,
  })

  const isbigCard = computed(() => props.bigSize)
</script>
<style lang="scss" scoped>
  .summary-card {
    padding: 16rpx;
    width: 338rpx;
    background: #f7f8fa;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 1px solid #e7e7e7;

    &.big-card {
      width: 100%;
      .card-header {
        border-bottom: 1px solid #e7e7e7;
        padding-bottom: 16rpx;
        margin-bottom: 16rpx;
      }
    }

    .card-header {
      margin-bottom: 12rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .card-title {
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 28rpx;
        color: #1d2129;
        line-height: 1;
        .title-icon {
          margin-right: 16rpx;
        }
        .title-text {
          max-width: 230rpx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .help-icon-width {
          margin-left: 8rpx;
        }
      }
    }
  }
</style>
